import { getInput, toMinute, toTimeString } from '../util.js';
import user from '../user.js';

export default {
  data() {
    return {
      templateList: user.templateList,
      selectedIndex: -1,
      addTimeA: '',
      addTimeB: '',
    }
  },
  template: /* html */`
    <div class="tab template-tab">
      <div class="subnav">
        <button @click="addTemplate">添加模板</button>
      </div>
      <div class="template-list">
        <div
          :class="['card', { active: selectedIndex === index }]"
          v-for="(template,index) in templateList"
          :key="template.name"
        >
          <h2
            :class="{ open: selectedIndex === index }"
            @click="select(index)"
          >{{ template.name }}
          </h2>
          <div
            class="middle"
            v-if="index === selectedIndex"
          > 
            <span v-for="(timePeriod,index) in template.timeList">
              <button
                class="flat"
                @click="removeBox(index)"
              >删除</button>
              {{ toTimeString(timePeriod) }}
            </span>
            <span>
              <button
                class="flat"
                @click="addBox"
              >添加</button>
              <input
                type="time"
                v-model="addTimeA"
              > -
              <input
                type="time"
                v-model="addTimeB"
              >
            </span>
          </div>
          <div
            class="buttom button-list"
            v-if="index === selectedIndex"
          >
            <button @click="up">上移</button>
            <button @click="remove">删除</button>
            <button @click="rename">重命名</button>
            <button @click="copy">复制</button>
            <button @click="apply">应用</button>
          </div>
        </div>
      </div>
    </div>
  `,
  computed: {
    selected() {
      return this.templateList[this.selectedIndex];
    },
  },
  methods: {
    select(index) {
      this.selectedIndex = this.selectedIndex === index ? -1 : index;
    },

    save() {
      return user.save('templateList');
    },

    addTemplate() {
      let name = getInput('标题');
      if (name !== undefined)
        this.templateList.push({ name, timeList: [] });
    },

    addBox() {
      if (this.addTimeA === '' || this.addTimeB === '')
        return false;
      let t = {
        start: toMinute(this.addTimeA),
        end: toMinute(this.addTimeB),
      }
      let index = this.selected.timeList.findIndex(
        x => x.start > t.start
      );
      if (index === -1)
        this.selected.timeList.push(t);
      else
        this.selected.timeList.splice(index, 0, t);
      this.addTimeA = '';
      this.addTimeB = '';
    },

    removeBox(index) {
      this.selected.timeList.splice(index, 1);
    },

    up() {
      if (this.selectedIndex < 1)
        return;
      let [a, b] = [this.selectedIndex, this.selectedIndex - 1];
      [this.templateList[a], this.templateList[b]] =
        [this.templateList[b], this.templateList[a]];
      --this.selectedIndex;
    },

    remove() {
      if (window.confirm('确定要删除此模板吗？'))
        this.templateList.splice(this.selectedIndex, 1);
      this.selectedIndex = -1;
    },

    rename() {
      let name = getInput('标题');
      if (name !== undefined)
        this.selected.name = name;
    },

    copy() {
      let name = getInput('标题');
      if (name !== undefined)
        this.templateList.push({
          name,
          timeList: this.selected.timeList.map(x => ({ ...x })),
        });
    },

    apply() {
      user.applyTemplate(this.selected);
    },

    toTimeString,
  },
  watch: {
    templateList: {
      deep: true,
      handler() {
        this.save();
      }
    }
  }
}
